<template>
  <div class="w-full">
    <quill-editor
      ref="editor"
      theme="snow"
      content-type="html"
      v-model:content="content"
      :options="options"
    />
  </div>
</template>

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getFile } from "@/utils/dom";
import { shardUpload } from "@/utils/shardUpload";

const content = defineModel({
  type: String,
  default: "",
});

const editor = ref();

const quill = computed(() => editor.value?.getQuill());

const options = ref({
  modules: {
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike"],
        [{ size: ["small", false, "large", "huge"] }],
        [{ font: [] }],
        [{ align: [] }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ header: 1 }, { header: 2 }],
        ["image"],
        [{ direction: "rtl" }],
        [{ color: [] }, { background: [] }],
      ],
      handlers: {
        image: async () => {
          const file = await getFile();
          const data = await shardUpload(file);
          if (!data) return;
          const length = quill.value.getSelection().index;
          quill.value.insertEmbed(length, "image", data.url);
          quill.value.setSelection(length + 1);
        },
      },
    },
  },
  placeholder: "请输入描述",
});

const setContent = (content) => {
  editor.value.setHTML(content);
};

defineExpose({
  setContent,
});
</script>
